<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="roles" class="demo-form-inline">
        <el-form-item label="角色Id" label-width="70px">
          <el-input clearable v-model="roles.rId" placeholder="请输入角色Id"></el-input>
        </el-form-item>
        <el-form-item label="角色" label-width="70px">
          <el-input clearable v-model="roles.roleName" placeholder="请输入角色"></el-input>
        </el-form-item>
        <el-form-item label="角色详情" label-width="70px">
          <el-input clearable v-model="roles.roleDesc" placeholder="请输入角色详情"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetRoleVo">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getRoleList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="showAdd">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示区域-->
      <el-table
        :data="roleList"
        border
        max-height="600"
        style="width: 100%;">
        <el-table-column
          prop="rId"
          label="角色Id"
          width="200">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色"
          width="200">
        </el-table-column>
        <el-table-column
          prop="roleDesc"
          label="部门角色详情"
          width="200">
        </el-table-column>

        <el-table-column
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit"
                       @click.native.prevent="showUpdate(scope.row.rId)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       @click.native.prevent="deleteDepartment(scope.row.rId)"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <RolesAdd :addVisible="addVisible" @changeShowAdd="showAdds" ref="addRef"></RolesAdd>
      <RolesUpdate :rIds="rIds" :updateVisible="updateVisible" @changeShowUpdate="showUpdates" ref="UpdateRef"></RolesUpdate>
    </el-card>
  </div>

</template>

<script>
import RolesAdd from "./RolesAdd";
import RolesUpdate from "./RolesUpdate";
  export default {
    name: 'Roles',
    data() {
      return {
        roles: {
          rId: undefined,
          roleName: '',
          roleDesc: '',
        },
        // 控制新增编辑弹窗的显示与隐藏
        addVisible: false,
        updateVisible: false,
        rIds: 0,
        //用户集合
        roleList: [],
        //每页显示的条数
        size: 6,
        //总条数
        total: 100,
        //当前页码
        current: 1,
      }
    },
    components: {
      RolesAdd,
      RolesUpdate
    },
    created() {
      //创建组件的时候调用查询所有用户的方法
      this.getRoleList()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将val赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getRoleList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getRoleList();
      },
      async getRoleList() {
        this.$axios.post("/sys/roles/search/" + this.current + "/" + this.size, this.roles).then((response) => {
          console.log(response)
          this.roleList = response.data.data.list;
          this.total = response.data.data.total;
        })
      },
      deleteDepartment(id) {
        this.$axios.delete("/sys/roles/" + id).then((response) => {
        });
        // location.reload();
      }
      ,
      //重置表单
      resetRoleVo() {
        this.roles.rId = '',
          this.roles.roleName = '',
          this.roles.roleDesc = '',

          this.getRoleList()
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      showAdd() {
        this.addVisible = true
      },
      showUpdate(id) {
        this.updateVisible = true;
        this.rIds = id;
        console.log("id=" + id);
      },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAdds(data) {
        if (data === 'false') {
          this.addVisible = false
        } else {
          this.addVisible = true
        }
      },
      showUpdates(data) {
        if (data === 'false') {
          this.updateVisible = false
        } else {
          this.updateVisible = true
        }
      }
    }
  }
</script>

<style scoped>

</style>
